<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <b>推荐用户</b>
        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
      </div>
      <div v-for="item in users" :key="item.user_id" class="text item">
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="4">
            <a href="./">
              <el-image class="head" style="width: 48px; height: 48px" :src="item.user_head" fit="fit"></el-image>
                <span class="cloudN-auth-mark">
                  <img src="../../public/image/auth.png" class="cloudN-authentication-mark-icon">
                </span>
            </a>
          </el-col>
          <el-col :span="10" class="author-lv-desc">
            <a href="./">
              <span class="nickname">{{ item.user_name }}</span>
            </a>
            <p style="width:120px">{{ item.user_sign }}</p>
          </el-col>
          <el-col :span="4" class="like">
            <el-button title="取消关注" v-if="item.like" type="primary" circle>
              <font-awesome-icon :icon="['far', 'heart']"></font-awesome-icon>
            </el-button>
            <el-button title="关注" v-else type="primary" circle>
              <font-awesome-icon :icon="['far', 'heart']"></font-awesome-icon>
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: [{ id: 0, headsrc: 'https://img-static.mihoyo.com/avatar/avatar30003.png', name: '细生', lv: 7, desc: '攻略作者' },
        {
          id: 1,
          headsrc: 'https://img-static.mihoyo.com/communityweb/upload/fdcc6cc9c6cbeaf8d24b1797a31511f0.png',
          name: 'xK Empty',
          lv: 14,
          desc: 'ACG领域作者，视频作者'
        },
        {
          id: 3,
          headsrc: 'https://img-static.mihoyo.com/communityweb/upload/4a2fa9c0bcd360d18d54d26f2f820212.png',
          name: '莉莉安',
          lv: 16,
          desc: 'ACG领域作者，视频作者'
        },
        {
          id: 4,
          headsrc: 'https://img-static.mihoyo.com/avatar/avatar30048.png',
          name: 'spiritex',
          lv: 16,
          desc: 'ACG领域作者，视频作者'
        },
        { id: 5, headsrc: 'https://img-static.mihoyo.com/avatar/avatar30048.png', name: '只会嘤嘤嘤', lv: 11, desc: '同人文作者' }
      ]
    }
  },
  created () {
    this.loadRecommendUser()
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    async loadRecommendUser () {
      var url = this.$config.urls.get('recommend_users')
      const { data: res } = await this.$http.get(url)
      if (res.code !== 0) {
        console.log('请求失败！')
      } else {
        this.users = res.data
        // console.log(res.data)
      }
    }
  },
  computed: {},
  name: 'recommendedUsers'
}
</script>

<style lang="less" scoped>
.author-lv-desc {
  padding-left: 40px;
}

//.content{
//  margin-top: 10px;
//}
span {
  margin-top: 2px;
  font-size: 14px;
  font-weight: bold;
}

p {
  margin-top: 24px;
  font-size: 12px;
}

span, p {
  position: absolute;
  margin-left: 20px;
  overflow: hidden;
  color: #999;
  //无法容纳的长文本。文本被修剪了
  text-overflow: ellipsis;
  // 禁止折行
  white-space: nowrap;
}

.like {
  padding: 0px;
  position: absolute;
  right: 10px;
}

.cloudN-auth-mark{
  position: absolute;
  left: 20px;
  top: 36px;
}
.cloudN-authentication-mark-icon {
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
.nickname {
  font-family: "微软雅黑", Arial, sans-serif;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -1px;
  color: #999999;
}
.nickname:hover{
  color: #00c3ff
}
</style>
